<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./swiper.min.css" />
    <script src="./swiper.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      .swiper-container {
        width: 100%;
        height: 100%;
      }
      .swiper-slide {
        background-color: skyblue;
        font-size: 60px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <!-- 第二步 准备一个轮播图的结构 -->
    <!-- 轮播图的整体容器 -->
    <div class="swiper-container" id="d1">
      <!-- 每一屏的容器 -->
      <div class="swiper-wrapper">
        <!-- 每一屏所显示的内容 -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
      </div>
      <!-- 小圆点 -->
      <div class="swiper-pagination"></div>
      <!-- 左右按钮 -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
    <div class="swiper-container" id="d2">
      <!-- 每一屏的容器 -->
      <div class="swiper-wrapper">
        <!-- 每一屏所显示的内容 -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
      </div>
      <!-- 小圆点 -->
      <div class="swiper-pagination"></div>
      <!-- 左右按钮 -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>

    <script>
      // 想要使用轮播图， 一定要先有结构 再去写他的js(new Swiper)
      // 多个实例对一个容器会出问题，  一个实例对多个容器没问题，但是不好
      new Swiper("#d1", {
        spaceBetween: 30, //控制每一屏中间的间隔
        speed: 1000,
        loop: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false, //鼠标操作之后 是否禁止自动轮播
        },
        pagination: {
          el: ".swiper-pagination", //选择到那个小圆点元素
          clickable: true, // 是否可以点击小圆点
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      })
      new Swiper("d2", {
        spaceBetween: 50, //控制每一屏中间的间隔
        speed: 4000,
        loop: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false, //鼠标操作之后 是否禁止自动轮播
        },
      })
    </script>
  </body>
</html>
